import {
  Box,
  Text,
  VStack,
  HStack,
  Badge,
  useColorModeValue,
} from '@chakra-ui/react';
import { getEllipsisTxt } from 'utils/format';

export interface Attribute {
  key: string;
  value: string;
}

export interface Credential {
  id: string;
  attributes: Attribute[];
  image?: string;
  issuer: string;
  issuerId: string;
  issuedDate: string;
}

interface CredentialCardProps {
  credential: Credential;
}

const CredentialCard = ({ credential }: CredentialCardProps) => {
  const bgColor = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');

  return (
    <Box
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
      borderColor={borderColor}
      bg={bgColor}
      _hover={{ shadow: 'lg' }}
      transition="all 0.3s"
      height="100%"
      boxShadow="sm"
    >
      <Box p={6}>
        <VStack align="stretch" spacing={4}>
          <HStack justify="space-between">
            <Badge colorScheme="purple" fontSize="sm" px={2} py={1}>
              凭证 ID: {getEllipsisTxt(credential.id)}
            </Badge>
          </HStack>

          <Box
            bg={useColorModeValue('blue.50', 'blue.900')}
            p={3}
            borderRadius="md"
            borderWidth="1px"
            borderColor={useColorModeValue('blue.200', 'blue.700')}
          >
             <Badge colorScheme="green" fontSize="sm">
              {credential.issuer}
            </Badge>
            <Text fontSize="sm" color={useColorModeValue('blue.700', 'blue.200')} wordBreak="break-all">
              发行方 ID: {credential.issuerId}
            </Text>
          </Box>

          <Box>
            <Text fontSize="sm" color={useColorModeValue('gray.700', 'gray.300')} mb={2} fontWeight="medium">
              属性列表:
            </Text>
            <VStack align="stretch" spacing={2}>
              {credential.attributes.map((attr, index) => (
                <HStack
                  key={index}
                  justify="space-between"
                  bg={useColorModeValue('gray.50', 'gray.600')}
                  p={2}
                  borderRadius="md"
                  borderWidth="1px"
                  borderColor={useColorModeValue('gray.200', 'gray.500')}
                  _hover={{
                    bg: useColorModeValue('blue.50', 'blue.900'),
                    borderColor: useColorModeValue('blue.200', 'blue.700'),
                    transform: 'translateY(-1px)',
                    shadow: 'sm'
                  }}
                  transition="all 0.2s"
                >
                  <Text 
                    fontSize="sm" 
                    fontWeight="medium" 
                    color={useColorModeValue('gray.800', 'white')}
                  >
                    {attr.key}:
                  </Text>
                  <Text 
                    fontSize="sm" 
                    color={useColorModeValue('blue.600', 'blue.200')}
                    fontWeight="medium"
                  >
                    {attr.value}
                  </Text>
                </HStack>
              ))}
            </VStack>
          </Box>

          <Text fontSize="xs" color={useColorModeValue('gray.600', 'gray.400')} alignSelf="flex-end">
            发行日期: {new Date(credential.issuedDate).toLocaleDateString()}
          </Text>
        </VStack>
      </Box>
    </Box>
  );
};

export default CredentialCard;